var showHome = true;
var homeExists = false;
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var youTubeScript = document.getElementsByTagName('script')[0];
youTubeScript.parentNode.insertBefore(tag, youTubeScript);

// This function creates an <iframe> (and YouTube player) after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('videoDiv', {
		height: '563',
		width: '1000',
		videoId: videoId,
		events: {
			'onStateChange': onPlayerStateChange
		},
		playerVars: {
			showinfo: '0',
			rel: '0',
			iv_load_policy: '3',
			disablekb: '1'
		}
	});
}

// The API calls this function when the player's state changes.
// The function indicates that when a video is paused (state=2),
// the event-controls are shown only when the player is paused - this is to accurately capture the time.
function onPlayerStateChange(event) {
	if (event.target.getPlayerState() == 2) {
		//When paused show the event controls and scroll the page so they are in view
		$('#app-screen-content').text("");
		decideView();
		updateCurrentEvents();
		$('html,body').animate({scrollTop: $("#event-scroll-position").offset().top},'slow');
	} else {
		$('#event-controls').hide('fast');
	}
}

function decideView() {
	//Show the home screen creator before creating the first event
	if (showHome == true) {
		//Create the default home screen on the app creator
		createHome();
		
		//Home is stored at -1 seconds get the body from the event servlet and amend the default home screen
		dataString = 'vidId=' + videoId + '&code=1&viewer=' + viewerId;
		$.ajax({
			type: "GET",
			url: "/event",
			data: dataString,
			success: function(data) {
				src = $(data).find('#app-home-img').attr('src');
				text = $(data).find('#app-home-text').text();
				if (src != null && text != null) {
					//Response was valid - update the app homepage
					$('#app-screen-content').find('#app-home-img').attr('src', src);
					$('#app-screen-content').find('#app-home-text').text(text);
					homeExists = true;
				} 
			}
		});
		
		//hide the event elements and show the home screen creator
		$('#app-elements').hide();
		$('#event-controls').show('fast');
		$('#app-homescreen').show();
		
	} else {
		$('#app-homescreen').hide();
		$('#event-controls').show('fast');
		$('#app-elements').show();
	}
}

function updateCurrentEvents() {
	dataString = 'vidId=' + videoId + '&code=2&viewer=' + viewerId;
	$.ajax({
		type: "GET",
		url: "/event",
		dataType: "json",
		data: dataString,
		success: function(data) {
			//Clear the table
			$('#current-events-table tbody').empty();
			//Loop through the dataset
			var rows = "";
			for (record in data) {
				title = data[record].title;
				time = data[record].time;
				id = (videoId + time);
				if (time >= 0) {
					rows += '<tr id="' + id + '"><td>' + title + 
						'</td><td>' + time + 
						'</td><td><button type="button" onclick="deleteEvent(\'' + id + '\')">Delete</button></td>';
				}
			}
			$('#current-events-table tbody').append(rows);
		}
	});
}